import { Menu, Spin } from 'antd';
import { toJS } from 'mobx';
import { observer } from "mobx-react";
import { WeaInputSearch ,WeaLocaleProvider} from 'ecCom';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import List from 'react-virtualized/dist/commonjs/List';
import TableItem  from './item';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class Sider extends React.Component {
    render() {
        const { store } = this.props;
        return (
            <div className="edc-ds-sider">
                <div className="edc-ds-source">
                    <p className="title">{getLabel(502330,'数据源')}</p>
                    <div className="edc-ds-title">
                        <p className="name" onClick={store.loadDataSource}>local</p>
                        <p className="type">sqlserver</p>
                    </div>
                    <div className="drop-menu">
                        <Menu>
                            {store.dataSource.map(d => {
                                return (
                                    <Menu.Item key={d.key}>
                                        {`${d.name}(${d.type})`}
                                    </Menu.Item>
                                )
                            })}

                        </Menu>
                    </div>
                </div>
                <div className="edc-ds-table">
                    <p className="title">{getLabel('502692','表、视图')}</p>
                    <div className="search">
                        <WeaInputSearch placeholder={getLabel('502693','请输入表或视图名')} />
                    </div>
                    <div className="list">
                        <Spin spinning={store.tableLoading}>
                            <AutoSizer>
                                {({ width, height }) => (
                                    <List
                                        width={width}
                                        height={height}
                                        rowCount={store.tables.length}
                                        rowHeight={42}
                                        rowRenderer={this.renderTableName}
                                    />
                                )}
                            </AutoSizer>
                        </Spin>
                    </div>
                </div>
            </div>
        )
    }
    renderTableName = (row) => {
        const { store } = this.props;
        const { key, style } = row;
        const data = store.tables[row.index];
        return (
            <TableItem
                key={key}
                style={style}
                data={toJS(data)}
            />
        );
    }
}